<template>
  <Dropdown placement="bottom-start" @on-click="(name) => changeCommon('textAlign', name)">
    <span class="font-style">对齐</span>
    <template #list>
      <DropdownMenu>
        <DropdownItem v-for="item in textAlignList" :key="item.key" :name="item.key">
          <div class="text-align-item">
            <span v-html="item.icon"></span>
            {{ item.text }}
          </div>
        </DropdownItem>
      </DropdownMenu>
    </template>
  </Dropdown>
</template>

<script setup name="Flip">
import useSelect from '@/hooks/select';

import textAlignLeft from '@/assets/icon/attribute/textAlignLeft.svg?raw';
import textAlignRight from '@/assets/icon/attribute/textAlignRight.svg?raw';
import textAlignCenter from '@/assets/icon/attribute/textAlignCenter.svg?raw';
import textAlignJustitfy from '@/assets/icon/attribute/textAlignJustitfy.svg?raw';

// 字体对齐方式
const textAlignList = [
  {
    key: 'left',
    icon: textAlignLeft,
    text: '左对齐',
  },
  {
    key: 'center',
    icon: textAlignCenter,
    text: '居中对齐',
  },
  {
    key: 'right',
    icon: textAlignRight,
    text: '右对齐',
  },
  {
    key: 'justify',
    icon: textAlignJustitfy,
    text: '两端对齐',
  },
];

const { canvasEditor } = useSelect();

// 通用属性改变
const changeCommon = (key, value) => {
  console.log(key, value);
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    activeObject && activeObject.set(key, value);
    canvasEditor.canvas.renderAll();
  }
};
</script>

<style scoped lang="less">
.font-style {
  font-size: 12px;
  font-weight: bold;
  padding: 0 5px;
  background-color: var(--background-primary-color);
  border-radius: 4px;
}
.text-align-item {
  font-size: 12px;
  font-weight: bold;
  padding: 0 5px;

  &:hover {
    svg {
      fill: var(--primary-color);
    }
  }

  svg {
    fill: var(--color-text-block);
  }
}
</style>
